<template>
  <div class="card">
    <div class="card-bg"></div>
    <div class="card-left"></div>
    <slot></slot>
  </div>
</template>

<script setup>
</script>

<style  scoped>
.card {
  height: 90%;
  width: 25%;
  padding: 20px;
  background: rgba(18, 46, 87, 0.35);
}

.card-bg {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  box-shadow: 0 0 1vw #1f69b9b9 inset;
  background: linear-gradient(#33cdfa, #33cdfa) left top,
    linear-gradient(#33cdfa, #33cdfa) left top,
    linear-gradient(#33cdfa, #33cdfa) right top,
    linear-gradient(#33cdfa, #33cdfa) right top,
    linear-gradient(#33cdfa, #33cdfa) left bottom,
    linear-gradient(#33cdfa, #33cdfa) left bottom,
    linear-gradient(#33cdfa, #33cdfa) right bottom,
    linear-gradient(#33cdfa, #33cdfa) right bottom;
  background-repeat: no-repeat;
  background-size: 0.1vw 1.5vw, 1.5vw 0.1vw;
}
.card-left {
  position: absolute; /* 使用绝对定位 */
  top: -1.2vw; /* 从父元素顶部的偏移量为0 */
  left: -1.2vw; /* 从父元素左侧的偏移量为0 */
  width: 0; /* 宽度为0 */
  height: 0; /* 高度为0 */
  border-style: solid; /* 边框样式为实线 */
  border-width: 1.2vw; /* 边框宽度为50px */
  border-color: transparent transparent #33cdfa transparent; /* 上边和右边透明，下边为青色，左边透明 */
  transform: rotate(-45deg); /* 添加旋转效果 */
  /* transform-origin: top left; 设置旋转中心点 */
}

.card-left::after {
  content: "";
  position: absolute;
  width: 3.53vw;
  height: 0.1vw;
  left: -1.8vw;
  top: 1.8vw;
  background: #33cdfa;
}
.card::after {
  content: "";
  position: absolute;
  width: 80px;
  height: 0.1vw;
  top: 0;
  left: 2.5vw;
  background: #33cdfa;
}
.card::before {
  content: "";
  position: absolute;
  width: 0.1vw;
  height: 80px;
  top: 2.5vw;
  left: -1px;
  background: #33cdfa;
}
</style>